<template>
  <div>
      <div class="goods-box" v-for="item of recoList" :key="item.id" 
            @click="$router.push('../../BoBo/GoodsDetail/'+item.id)">
        <div class="left-img">
          <img class="goods-img" :src="require('../../../../img/home/'+item.recoImg)" >
        </div>
        <div class="right-word">
          <div class="goods-desc"><span>{{item.recoDesc}}</span></div>
          <div class="goods-price">
            <span class="money">￥{{item.recoPrice}}</span>
            <span class="pindan">{{item.recoPin}}</span>
          </div>
        </div>
      </div>
      
      <div>
          <p style="font-size: 10px; text-align: center;margin:10px;margin-bottom:58px">
            到达页面的尽头</p>
      </div>
  </div>

</template>

<script>
// import axios from 'axios'

export default {
    name: 'GoodsList',
    props:{
        recoList:Array
    },  
}
</script>
<style scoped lang="stylus">
.goods-box{
    height 9rem
    padding 2% 
    overflow hidden
    background-color white
  }
  .left-img{
    width 40%
    min-height 99%
    display inline-block
    float left
    margin-left 1rem
    position relative //实现图片始终紧贴四壁
  }
  .goods-img{
    width 110%
    height 100%
    position absolute //实现图片始终紧贴四壁
    top 0
    left 0
    object-fit cover
    border-radius 10px
  }
  .right-word{
    position relative 
    float right
    width 45%
    min-height 100%;
    /*margin-right 3rem*/
  }
  .goods-desc{
    margin .3rem
    width max-width
    height auto
    font-size 1rem
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2
    overflow hidden
    text-overflow ellipsis
  }
  .money{
    float left
    margin .3rem
    color #f5812c
    font-weight bold
    font-size 1.2rem
  }
  .pindan{
    margin .3rem
    font-size .8rem
    float left
}
  .goods-price{
    position absolute
    bottom 0
    left 0
  }

</style>